<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>没毛病</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <meta name="apple-mobile-web-app-capable" content="no">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no">
  <style>
    .history{
      text-align:center;
    }

    #sec{
      width:50%;
      overflow:hidden;
      text-align:left;
      height:38px;
      border:1px solid #ccc;
      border-radius: 10px;
    }
    .delete:after{
      clear:both;content:'.';
      display:block;
      width: 0;
      height: 0;
      visibility:hidden;
    }
    .delete>div {
      border-radius: 50px;
      float: left;
      /*width: 25%;*/
      height: 23px;
      border: 1px solid #ccc;
      background: #E0E0E0;
      margin-top: 14px;
      margin-right: 10px;
      overflow:hidden;
    }
    #search{
      width: 141px;
      height: 37px;
      font-size: 14px;
      line-height: 14px;
      color: #959595;
      padding-bottom: 2px;
    }
    #his-dele{
      width: 22px;
      height: 22px;
      line-height: 22px;
      display: inline-block;
      background: #E0E0E0;
      color: #fff;
      border-radius: 50%;
      text-align: center;
      margin-left:10px;
      float: right;
      position: relative;
      top: -26px;
    }
    .current{

    }
  </style>
</head>
<body>
<input class="" id="sec">

<button id="search">按钮</button>
<div class="current">最近搜索</div>
<div class="delete history" style="width: 100%;float: left">
</div>

<div class="history"  id="his-dele">X</div>
<!--清空历史记录-->
<div class="Storage" style="width: 100px;height: 100px;margin: 0 auto;"></div>
<script src="js/jquery-1.11.0.js"></script>
<script>
  $(document).delegate(".delete>div","click",function(){
    $("#sec").val($(this).text());
  });
  /*搜索记录相关*/
  //从localStorage获取搜索时间的数组
  var hisTime;
  //从localStorage获取搜索内容的数组
  var hisItem;
  //从localStorage获取最早的1个搜索时间
  var firstKey;
  function init (){
    //每次执行都把2个数组置空
    hisTime = [];
    hisItem = [];
    //模拟localStorage本来有的记录
    //localStorage.setItem("b",12333);
    //本函数内的两个for循环用到的变量
    var i=0
    for(;i<localStorage.length;i++){
      if(!isNaN(localStorage.key(i))){
        hisTime.push(localStorage.key(i));
      }
    }
    //有空格bug
//    if(hisTime.length>0) {
//      hisTime.sort();
//      for (var y = hisTime.length-1; y > 0; y--) {
//        hisItem.push(localStorage.getItem(hisTime[y]));
//      }
//    }
//    取到的是历史记录如果不是空格，先取再存到数组里
    if(hisTime.length>0) {
      hisTime.sort();
      for (var y = hisTime.length-1; y>0; y--) {
        localStorage.getItem(hisTime[y]).trim()&&hisItem.push(localStorage.getItem(hisTime[y]));
      }
    }

    i=0;
    //执行init(),每次清空之前添加的节点
    $(".delete").html("");
    for(;i<hisItem.length;i++){
      //alert(hisItem);
      $(".delete").prepend('<div class="word-break" style="display: none">'+hisItem[i]+'</div>')
    }
  }
  init();

  $("#search").click(function(){
    var value = $("#sec").val();
    alert(1111)
    var time = (new Date()).getTime();

    if(!value){
      alert("你未输入搜索内容");
      return false;
    }
    //输入的内容localStorage有记录
    if($.inArray(value,hisItem)>=0){
      for(var j = 0;j<localStorage.length;j++){
        if(value==localStorage.getItem(localStorage.key(j))){
          localStorage.removeItem(localStorage.key(j));
        }
      }
      localStorage.setItem(time,value);
    }
    //输入的内容localStorage没有记录
    else{
      //由于限制了只能有6条记录，所以这里进行判断
      if(hisItem.length>4){
        firstKey = hisTime[0]
        localStorage.removeItem(firstKey);
        localStorage.setItem(time,value);
      }else{
        localStorage.setItem(time,value)
      }
    }
    init();
    //正式的时候要提交的！！！
    //$("#form1").submit()
  });

  //清除记录功能
  $("#his-dele").click(function(){
    var f = 0;
    for(;f<hisTime.length;f++){
      localStorage.removeItem(hisTime[f]);
    }
    init();
    window.location.reload();
  });
  //苹果手机不兼容出现input无法取值以下是解决方法
  $(function(){
    $('.word-break').click(function(){
      var div = $(this).text();
      $('#sec').val(div);
    })
    //取到值以后button存储无法取值，这里强迫浏览器强行刷新可解决
    $('#search').click(function(){
      window.location.reload();
    })
  })
  //存储数据默认隐藏获取焦点显示
  $('#sec').focus(function(){
    $('.word-break').css('display','block');
  })
  //这里判断本地浏览器是否有离线存储记录苹果浏览器不支持localStorage.length
//  if(localStorage.length == 0) {
//    $(".Storage").html('无存储记录');
//  }
  //通过DOM查找插入的记录如果有显示空反之显示无记录
  if($(".delete").children().hasClass("word-break")){
    //alert("hi");
    $(".Storage").html('')
  }else{
    $(".Storage").html('无存储记录');
  }

</script>
</body>
</html>